const { join } = require("path");

const PRIMARY_COLOR_PALETTES = [
  {
    name: "teal",
    palette: {
      50: "#f0fdfa",
      100: "#ccfbf1",
      200: "#99f6e4",
      300: "#5eead4",
      400: "#2dd4bf",
      500: "#14b8a6",
      600: "#0d9488",
      700: "#0f766e",
      800: "#115e59",
      900: "#134e4a",
      950: "#042f2e"
    }
  }
];

const SURFACE_PALETTES = [
  {
    name: "zinc",
    palette: {
      0: "#ffffff",
      50: "#fafafa",
      100: "#f4f4f5",
      200: "#e4e4e7",
      300: "#d4d4d8",
      400: "#a1a1aa",
      500: "#71717a",
      600: "#52525b",
      700: "#3f3f46",
      800: "#27272a",
      900: "#18181b",
      950: "#09090b"
    }
  }
];

function getPrimary(name) {
  const color = PRIMARY_COLOR_PALETTES.find((c) => c.name === name);
  if (!color) return {};
  const result = {};
  Object.entries(color.palette).forEach(([key, value]) => {
    result[`primary-${key}`] = value;
  });
  return result;
}

function getSurface(name) {
  const color = SURFACE_PALETTES.find((c) => c.name === name);
  if (!color) return {};
  const result = {};
  Object.entries(color.palette).forEach(([key, value]) => {
    result[key === "0" ? "surface" : `surface-${key}`] = value;
  });
  return result;
}

module.exports = {
  content: [join(__dirname, "./src/**/*.{vue,uvue,js,ts}")],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        ...getPrimary("teal"),
        ...getSurface("zinc")
      },
      fontSize: {
        md: ["1rem", "1.5rem"]
      },
      scale: {
        80: "0.8"
      }
    }
  },
  corePlugins: {
    preflight: false
  }
};
